<script setup lang="ts">
import { ref,shallowRef } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)

// 情况 1：使用 ref 包裹对象
const objRef = ref({ a: 1 });
objRef.value.a = 2; // 触发更新（因为 ref 对对象做了深度响应式）

// 情况 2：使用 shallowRef 包裹对象
const shallowObj = shallowRef({ a: 1 });
shallowObj.value.a = 2; // 不触发更新（内部属性未被响应式处理）
shallowObj.value = { a: 2 }; // 触发更新（替换整个引用）

</script>

<template>
  <h1>{{ msg }}</h1>

  

</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
